<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/utils.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        #app{
            margin-left: 30px;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="select-from">
        <el-form :inline="true" :model="selectPartForm" class="demo-form-inline">
            <el-form-item label="编号">
                <el-input v-model="selectPartForm.partCode" placeholder="编号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                        v-model="selectPartForm.timeHorizon"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="创建人">
                <el-input v-model="selectPartForm.creator" placeholder="创建人"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
    </div>

    <template>
        <el-table
                :data="pageBean.data"
                style="width: 100%">
            <el-table-column
                    prop="partcode"
                    label="零件编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="partname"
                    label="零件名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="saleprice"
                    label="零件价格">
            </el-table-column>
            <el-table-column
                    prop="partstore"
                    label="数量">
            </el-table-column>
            <el-table-column
                    label="总价">
                <template slot-scope="scope">
                    <span>{{scope.row.saleprice*scope.row.partstore}}</span>
                </template>
            </el-table-column>
        </el-table>
    </template>

    <!--  分页  -->
    <template style="margin: 20px auto;">
        <div class="block" >
            <span class="demonstration">显示总数</span>
            <el-pagination
                    @current-change="handleCurrentChange"
                    layout="total, prev, pager, next"
                    :page-size="5"
                    :total="pageBean.totalCount">
            </el-pagination>
        </div>
    </template>
</div>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            parts: [],
            pageBean:{
                totalPageCount:0, //总页数
                totalCount:0,     //记录总数
                data:[],          //总条数
                page:0            //当前页号
            },
            selectPartForm: {
                partCode:"",
                timeHorizon:"",
                creator:""
            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            }
        },

        methods: {
            // 查询所有
            queryAll(){
                let _this = this;
                selectAjax("get","/carpartstable/queryAll",{},function(data){

                    _this.parts = data.data;
                    _this.pageBean.totalCount = data.data.length;
                    _this.pageBean.page = 1;

                    _this.subData();
                });
            },
            // 提交查询
            onSubmit(){
                console.log(this.selectPartForm)
                let _this = this;
                if (localStorage.getItem("token") != null){
                    $.ajax({
                        async:"true",
                        url:"http://localhost:8080/carSales/carpartstable/queryList",
                        type:"get",
                        data:_this.selectPartForm,
                        headers:{
                            "Authentication":localStorage.getItem("token")
                        },
                        dataType:"json",
                        success:function(data){
                                _this.parts = data.data;
                                _this.pageBean.totalCount = data.data.length;
                                _this.pageBean.page = 1;
                                _this.subData();
                        }
                    });
                }else {
                    alert("未登录！！！")
                    top.location.href = "../login/login.html";
                }
            },
            // 截取数据
            subData(){
                this.pageBean.data = this.parts.slice((this.pageBean.page-1)*5,this.pageBean.page*5);
            },
            handleCurrentChange(val) {
                this.pageBean.page = window.parseInt(val);
                this.subData();
            }
        },

        mounted(){
            this.queryAll();
        }

    });
</script>
</body>
</html>